<template>
  <div class="register-container">
    <q-card class="register-card q-pa-lg">
      <q-card-section class="text-center">
        <div class="text-h4 text-weight-bold q-mb-md">注册账号</div>
        <div class="text-subtitle1 text-grey-7">创建您的个人博客账号</div>
      </q-card-section>

      <q-separator class="q-my-md" />

      <q-card-section>
        <q-form @submit="onSubmit" class="q-gutter-md">
          <q-input
            v-model="form.username"
            label="用户名"
            outlined
            :rules="[
              val => !!val || '请输入用户名',
              val => val.length >= 4 || '用户名至少需要4个字符'
            ]"
          >
            <template v-slot:prepend>
              <q-icon name="person" />
            </template>
          </q-input>

          <q-input
            v-model="form.email"
            label="邮箱"
            type="email"
            outlined
            :rules="[
              val => !!val || '请输入邮箱',
              val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || '请输入有效的邮箱地址'
            ]"
          >
            <template v-slot:prepend>
              <q-icon name="email" />
            </template>
          </q-input>

          <q-input
            v-model="form.password"
            label="密码"
            :type="isPwd ? 'password' : 'text'"
            outlined
            :rules="[
              val => !!val || '请输入密码',
              val => val.length >= 6 || '密码至少需要6个字符'
            ]"
          >
            <template v-slot:prepend>
              <q-icon name="lock" />
            </template>
            <template v-slot:append>
              <q-icon
                :name="isPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isPwd = !isPwd"
              />
            </template>
          </q-input>

          <q-input
            v-model="form.confirmPassword"
            label="确认密码"
            :type="isConfirmPwd ? 'password' : 'text'"
            outlined
            :rules="[
              val => !!val || '请确认密码',
              val => val === form.password || '两次输入的密码不一致'
            ]"
          >
            <template v-slot:prepend>
              <q-icon name="lock" />
            </template>
            <template v-slot:append>
              <q-icon
                :name="isConfirmPwd ? 'visibility_off' : 'visibility'"
                class="cursor-pointer"
                @click="isConfirmPwd = !isConfirmPwd"
              />
            </template>
          </q-input>

          <div class="q-mt-sm">
            <q-checkbox 
              v-model="form.agreeTerms" 
              label="我已阅读并同意服务条款和隐私政策" 
              color="primary"
              :rules="[val => val === true || '您必须同意条款才能注册']"
            />
          </div>

          <div class="q-mt-lg">
            <q-btn
              type="submit"
              color="primary"
              label="注册"
              class="full-width"
              :loading="isSubmitting"
              :disable="!isFormValid"
              size="lg"
            />
          </div>
        </q-form>
      </q-card-section>

      <q-separator class="q-my-md" />

      <q-card-section class="text-center">
        <div class="text-subtitle1 q-mb-md">社交账号快速注册</div>
        <div class="row justify-center q-gutter-md">
          <q-btn round color="red" icon="fab fa-weibo" />
          <q-btn round color="green" icon="fab fa-wechat" />
          <q-btn round color="blue" icon="fab fa-qq" />
        </div>
      </q-card-section>

      <q-card-section class="text-center q-pt-none">
        <div class="q-mt-md">
          已有账号？ 
          <q-btn flat color="primary" label="立即登录" class="no-caps" to="/login" />
        </div>
      </q-card-section>
    </q-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar'

const router = useRouter()
const $q = useQuasar()

const isPwd = ref(true)
const isConfirmPwd = ref(true)
const isSubmitting = ref(false)

const form = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: '',
  agreeTerms: false
})

const isFormValid = computed(() => {
  return form.value.username.length >= 4 &&
         /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.value.email) &&
         form.value.password.length >= 6 &&
         form.value.password === form.value.confirmPassword &&
         form.value.agreeTerms
})

const onSubmit = () => {
  if (!isFormValid.value) return

  isSubmitting.value = true

  // 模拟注册请求
  setTimeout(() => {
    // 在实际应用中，这里应该是一个真实的 API 请求
    const mockUser = {
      id: 1,
      username: form.value.username,
      email: form.value.email,
      avatar: '/pic/1.webp'
    }

    // 保存用户信息到 localStorage 或 state 管理
    localStorage.setItem('user', JSON.stringify(mockUser))
    
    isSubmitting.value = false
    
    // 显示注册成功通知
    $q.notify({
      message: '注册成功！欢迎加入我们',
      color: 'positive',
      icon: 'check_circle',
      position: 'top'
    })

    // 跳转到首页或登录页
    router.push('/')
  }, 1500)
}
</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  min-height: 80vh;
}

.register-card {
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 450px;
}

@media (max-width: 600px) {
  .register-container {
    padding: 20px 16px;
  }
}
</style> 